<!--多条件搜索-->
<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择场地">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="deviceNo">设备号</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <input type="text" id="deviceNo" nz-input formControlName="deviceNo" placeholder="请输入设备号"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="hierarchy">货道层</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-input-number id="hierarchy" formControlName="hierarchy" style="width: 100%" [nzMin]="1" [nzStep]="1"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="freightLane">货道列</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-input-number id="freightLane" formControlName="freightLane" style="width: 100%" [nzMin]="1"  [nzStep]="1"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <!--    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">-->
    <!--      <div>-->
    <!--        <nz-form-item>-->
    <!--          <nz-form-label [nzSpan]="8">一级类型</nz-form-label>-->
    <!--          <nz-form-control [nzSpan]="16">-->
    <!--            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择一级类型" formControlName="firstType">-->
    <!--              <nz-option nzLabel="不限" nzValue="-1"></nz-option>-->
    <!--              <nz-option nzLabel="入库单" nzValue="1"></nz-option>-->
    <!--              <nz-option nzLabel="出库单" nzValue="2"></nz-option>-->
    <!--              <nz-option nzLabel="调拨" nzValue="3"></nz-option>-->
    <!--              <nz-option nzLabel="退货" nzValue="4"></nz-option>-->
    <!--              <nz-option nzLabel="盘点单" nzValue="5"></nz-option>-->
    <!--              <nz-option nzLabel="备货单" nzValue="6"></nz-option>-->
    <!--            </nz-select>-->
    <!--          </nz-form-control>-->
    <!--        </nz-form-item>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">二级类型</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择二级类型" formControlName="secondaryType">
              <nz-option nzLabel="不限" nzValue="-1"></nz-option>
              <nz-option nzLabel="换货出库单" nzValue="1"></nz-option>
              <nz-option nzLabel="销售出库单" nzValue="2"></nz-option>
              <nz-option nzLabel="手动出库单" nzValue="3"></nz-option>
              <nz-option nzLabel="兑换出库单" nzValue="4"></nz-option>
              <nz-option nzLabel="撤销回收出库单" nzValue="5"></nz-option>
              <nz-option nzLabel="出礼出库单" nzValue="6"></nz-option>
              <nz-option nzLabel="盘亏出库单" nzValue="7"></nz-option>
              <nz-option nzLabel="调拨出库单" nzValue="8"></nz-option>
              <nz-option nzLabel="退还出库单" nzValue="9"></nz-option>
              <nz-option nzLabel="售货机销售出库单" nzValue="10"></nz-option>
              <nz-option nzLabel="售货机手动清货单" nzValue="11"></nz-option>

              <nz-option nzLabel="进货入库单" nzValue="21"></nz-option>
              <nz-option nzLabel="换货入库单" nzValue="22"></nz-option>
              <nz-option nzLabel="盘盈入库单" nzValue="23"></nz-option>
              <nz-option nzLabel="退货入库单" nzValue="24"></nz-option>
              <nz-option nzLabel="回收入库单" nzValue="25"></nz-option>
              <nz-option nzLabel="兑换入库单" nzValue="26"></nz-option>
              <nz-option nzLabel="调拨入库单" nzValue="27"></nz-option>
              <nz-option nzLabel="售货机入库单" nzValue="28"></nz-option>

              <nz-option nzLabel="盘点单" nzValue="41"></nz-option>
              <nz-option nzLabel="兑换退货单" nzValue="42"></nz-option>
              <nz-option nzLabel="调拨单" nzValue="43"></nz-option>
              <nz-option nzLabel="备货单" nzValue="44"></nz-option>

              <nz-option nzLabel="售货机货道容量修改单" nzValue="51"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">记录开始时间</nz-form-label>
        <nz-form-control >
          <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">记录结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" class="margin-bottom"
         [ngClass]="isMobile? '': 'padding-left'">
      <div nz-row nzJustify="end">
        <div nz-col>
          <button *ngIf="!isMobile" (click)="submitForm()"  nz-button nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                                                nzTheme="outline"></i>查询
          </button>
          <button *ngIf="isMobile"  (click)="submitForm()" nz-button nzBlock nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                                                       nzTheme="outline"></i>查询
          </button>
          <button (click)="exportCsv()" *ngIf="!isMobile" nz-button nzType="primary" style="margin-left: 10px" class="button_search">
            <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
          </button>
          <button (click)="exportCsv()" *ngIf="isMobile" nz-button style="margin-top: 5px"  nzBlock nzType="primary" class="button_search">
            <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th>场地</th>
      <th>设备号/时间</th>
      <th>状态</th>
      <th>货道</th>
      <th>商品</th>
      <th>库存前</th>
      <th>库存后</th>
      <th>变量</th>
      <th>备注</th>
      <th>售价前</th>
      <th>售价后</th>
      <th>成本价前</th>
      <th>成本价后</th>
      <th>操作员</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td nzEllipsis>
          <div>{{ data.storeName }}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.deviceNo }}</div>
          <div>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
        </td>
        <td nzEllipsis>
          <div *ngIf="data.firstType==1">入库单</div>
          <div *ngIf="data.firstType==2">出库单</div>
          <div *ngIf="data.firstType==3">调拨</div>
          <div *ngIf="data.firstType==4">退货</div>
          <div *ngIf="data.firstType==5">盘点单</div>
          <div *ngIf="data.firstType==6">备货单</div>
        </td>
        <td nzEllipsis>
          <div>{{data.hierarchy!=null && data.freightLane!=null?data.hierarchy+'层'+data.freightLane+'货道':'无'}}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.commodityName!=null? data.commodityName:'无' }}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.stockBefore!=null?data.stockBefore:'无' }}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.stockAfter!=null?data.stockAfter:'无' }}</div>
        </td>
        <td nzEllipsis>
          <div [ngStyle]="data.stockAfter-data.stockBefore<0?{'color':'#ff0000'}:''">{{data.stockAfter-data.stockBefore}}</div>
        </td>
        <td nzEllipsis>
          <div>{{data.remark!=null?data.remark:'无'}}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.retailPriceBefore!=null?data.retailPriceBefore:'无' }}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.retailPriceAfter!=null?data.retailPriceAfter:'无' }}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.costPriceBefore!=null?data.costPriceBefore:'无' }}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.costPriceAfter!=null?data.costPriceAfter:'无' }}</div>
        </td>
        <td nzEllipsis>
          <div>{{data.userName!=null?data.userName:'无'}}</div>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>
